<template>
  <div class="container">
    <div class="container-content">
      <img
        src="../assets/images/_20240608171829.png"
        alt=""
        @click="cell"
      />
      <van-grid  :row-num="1" :column-num="2">
        <van-grid-item
          v-for="(item, index) in items"
          :key="index"
          :icon="item.image"
          :text="item.text"
          @click="send(index)"
        />
      </van-grid>
    </div>
  </div>
</template>
<script>
import { showToast } from "vant";
import zytz from "../assets/images/_20240528225038.png";
import jkwd from "../assets/images/_20240528225026.png";
// import jtqy from "../assets/images/微信图片_20240528225015.png";
// import sfwd from "../assets/images/微信图片_20240528225026.png";
export default {
  data() {
    return {
      //功能模块渲染列表
      items: [
        { image: zytz, text: "中医体质辨识"},
        { image: jkwd, text: "健康问答" },
        // { image: jtqy, text: "家庭签约" },
        // { image: sfwd, text: "随访问答" },
      ],
    };
  },
  methods: {
    //退出登录操作
    cell() {
      this.$confirm("您确认要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "messageBox",
      })
        .then(() => {
          // 用户点击确认
          this.$router.push("/login");
          sessionStorage.clear()
          // 在这里执行跳转逻辑
        })
        .catch(() => {
          // 用户点击取消
          this.$message.info("已取消退出登录操作");
          // 如果需要可以在这里执行其他逻辑
        });
    },
    //选择功能模块
    send(index) {
      if (index == 0) {
        //中医体质辨识模块
        this.$router.push({
          path: "/souye",
        });
      } else if (index == 1) {
        //健康问答模块
        this.$router.push("/jkwd");
      }
      //  else if (index == 2) {
      //   //家庭签约模块
      //   showToast("正在抓紧开发中");
      // } else if (index == 3) {
      //   //随访问答模块
      //   showToast("正在抓紧开发中");
      // }
    },
  },
};
</script>
<style scoped>
.container-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-toast {
  z-index: 9999 !important; /* 设置你想要的层级值 */
}
img {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 999;
  transform: translate(50%-50px, 50%-50px);
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/images/blue.png");
}
::v-deep .van-grid {
  width: 100vw;
  height: 100%;
}
::v-deep .van-grid-item__content {
  background-image: url("../assets/images/_20240528231048.png");
  height: 590px;
  display: grid;
}
::v-deep .van-grid-item__icon {
  font-size: 250px;
}
::v-deep .van-grid-item__text {
  font-size: 35px;
  /* height: 100%; */
 
}
::v-deep .van-grid-item__icon+.van-grid-item__text{
 
}
@media screen and (orientation: portrait) {
  .portrait {
    /* 竖屏样式 */
  }
  ::v-deep .van-grid-item__content {
    background-image: url("../assets/images/_20240528231048.png");
    width: 100%;
    height: 100%;
  }
  ::v-deep .van-grid-item__icon {
    padding-top: 65px;
    font-size: 420px;
  }
  ::v-deep .van-grid-item__text {
    font-size: 55px;
    height: 100%;
  }
  ::v-deep .van-grid-item {
    width: 50%;
  }
  ::v-deep .van-grid {
    width: 100vw;
    height: 100vh;
  }
}
</style>
